<script setup lang="ts">
let player = ref(false)
function playerFn () {
  player.value = !player.value
}
</script>

<template>
<div class="wrap">
  <div class="form">
    <label class="toggle" for="play" @click.stop.capture.prevent="playerFn">
      <span class="toggle__label">Toggle Item's Position {{player}} </span>
      <input :checked="player" type="checkbox" role="switch" class="toggle__element" id="play" />
      <div class="toggle__decor" aria-hidden="true">
        <div class="toggle__thumb"></div>
      </div>
    </label>
  </div>

  <section>
    <div :class="{'player': player}" class="container">
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
    </div>
  </section>
</div>
</template>

<style scoped lang="scss">
.wrap {
  --color-primary: #3740ff;
  --color-primary-dark: #272eb5;
  --color-primary-light: #3740ff;
  --color-primary-x-light: #e8f0fe;
  --color-light: #ffffff;
  --color-dark: #202124;
  --color-off-white: #f3f4f4;
  --color-mid: #5f6368;
  --color-mid-dark: #3c4043;
  --color-stroke: #dadce0;
  --metric-gutter: 1.5rem;
  --metric-box-spacing: 1rem;
  --metric-radius: 3px;
  --generic-shadow: 0px 1px 2px rgba(60, 64, 67, 0.3),
  0px 2px 6px 2px rgba(60, 64, 67, 0.15);
  --font-mono: SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;

  width: 100vw;
  min-height: 100vh;
  font-family: "Exo", Arial, sans-serif;
  background-color: #557;
  color: #fff;
  display: grid;
  place-content: center;
  padding: 1rem;
  gap: 2rem;


  .form {
    display: flex;
    align-items: center;
    gap: 5px;

    .toggle {
      --metric-toggle-thumb-size: 1rem;
      --metric-toggle-thumb-space: 0.25rem;
      position: relative;
      display: inline-flex;
      align-items: center;

      &::after {
        content: "\A";
        white-space: pre;
      }

      .toggle__element {
        opacity: 0;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: var(--metric-toggle-thumb-size);
        width: 1em;
        height: 1em;
        &:checked + .toggle__decor {
          background: var(--color-primary-light);
          .toggle__thumb {
            transform: translateX(var(--metric-toggle-thumb-size)) rotate(270deg);
          }
        }
      }
      .toggle__decor {
        display: block;
        position: relative;
        overflow: hidden;
        width: calc(
            (var(--metric-toggle-thumb-size) * 2) +
            (var(--metric-toggle-thumb-space) * 2)
        );
        height: calc(
            var(--metric-toggle-thumb-size) + (var(--metric-toggle-thumb-space) * 2)
        );
        background: var(--color-mid);
        margin-left: 0.5rem;
        border-radius: var(--metric-toggle-thumb-size);
        box-sizing: content-box;
        border: 1px solid var(--color-light);

        .toggle__thumb {
          display: grid;
          place-items: center;
          width: var(--metric-toggle-thumb-size);
          height: var(--metric-toggle-thumb-size);
          border-radius: var(--metric-toggle-thumb-size);
          background: linear-gradient(
                  229.84deg,
                  rgba(255, 255, 255, 0) 14.29%,
                  rgba(48, 48, 48, 0.15) 81.82%
          ),
          #ffffff;
          box-shadow: var(--generic-shadow);
          position: absolute;
          top: var(--metric-toggle-thumb-space);
          left: var(--metric-toggle-thumb-space);
          transform: none;
          transition: transform 200ms cubic-bezier(1, 0, 0.55, 0.85);
          // 告知浏览器该元素会有哪些变化方法，浏览器提前做好优化准备工作，使页面的反应更为快速灵敏
          will-change: transform;
          z-index: 1;
          &::before {
            content: "";
            display: none;
            width: calc(
                var(--metric-toggle-thumb-size) - var(--metric-toggle-thumb-space)
            );
            height: calc(
                var(--metric-toggle-thumb-size) - var(--metric-toggle-thumb-space)
            );
            border: 1px solid var(--color-primary-light);
            border-radius: calc(
                var(--metric-toggle-thumb-size) - var(--metric-toggle-thumb-space)
            );
          }
        }
      }
    }
  }

  section {
    width: 1000px;
    margin: 0 auto;

    display: flex;
    box-shadow: 0 0 0 6px rgb(217 210 10 / 9%);
    border-radius: 4px;

    .container {
      display: grid;
      gap: 1rem;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: repeat(3, 1fr);

      --width: 100%;
      width: var(--width);
      padding: 1rem;


      outline: 1px dashed #f36;
      counter-reset: item;
      .item {
        counter-increment: item;
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 120px;
        background-color: #2c6;
        color: #000;
        position: relative;

        &:nth-child(1) {
          background-color: #bbd7af;
          background-image: repeating-conic-gradient(
                  from 7.5deg at 50% 0,
                  transparent 0 15deg,
                  #09f336 0 30deg
          ),
          linear-gradient(177deg, #f196f312, #f4433609);
          mix-blend-mode: overlay;
          background-blend-mode: screen;
          box-shadow: inset 0px 0px 0px 3px rgb(159 86 181 / 50%);
          text-shadow: 1px 1px 0 rgb(255 255 255 / 0.5);
        }

        &:nth-child(2) {
          background-color: #dac2f1;
        }
        &:nth-child(3) {
          background-color: #ccf1c2;
        }
        &:nth-child(4) {
          background-color: #c2e9f1;
        }
        &:nth-child(5) {
          background-color: #9f10ae;
        }
        &:nth-child(6) {
          background-color: #f44336;
        }
        &:nth-child(7) {
          background-color: #2196f3;
        }
        &:nth-child(8) {
          background-color: #f196f3;
        }

        &::before {
          content: counter(item);
          font-family: "Bungee Shade", cursive;
          font-size: 3.5rem;
        }
      }

      &.player {
        .item:nth-child(1) {
          /*   grid-row-start: 1;
          grid-row-end: 3;
          grid-column-start: 1;
          grid-column-end: 3; */
          animation: place 2s cubic-bezier(0.09, 0.8, 0.84, 0.22) 1 both;
        }

        @keyframes place {
          from {
            grid-row-start: auto;
            grid-row-end: auto;
            grid-column-start: auto;
            grid-column-end: auto;
          }
          to {
            grid-row-start: 1;
            grid-row-end: 3;
            grid-column-start: 1;
            grid-column-end: 3;
          }
        }
      }
    }
  }
}
</style>
